<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
      <el-breadcrumb-item>部门查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            placeholder="请输入部门名称"
            v-model="dept.name"
            clearable
          ></el-input>
        </el-col>

        <el-col :span="1" style="margin-right: 40px">
          <el-button type="primary" icon="el-icon-search" @click="getDeptList"
            >搜索</el-button
          >
        </el-col>
        <el-col :span="1">
          <el-button type="danger" icon="el-icon-search" @click="btndelete">删除</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表(表格)区域 -->
      <el-table
        ref="multipleTable"
        :data="deptList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="部门名称" prop="name"></el-table-column>
        <el-table-column label="详细信息" prop="remark"></el-table-column>
        <el-table-column label="操作" width="220">
          <template slot-scope="scope">
            <!-- 编辑 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editDeptById(scope.row.id)"
            ></el-button>
            <!-- 删除 -->
<!--            <el-button-->
<!--              type="danger"-->
<!--              icon="el-icon-delete"-->
<!--              size="mini"-->
<!--              @click="removeDeptById(scope.row.id)"-->
<!--            ></el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getDeptList();
  },
  data() {
    return {
      //多选属性
      multipleSelection: [],
      deptList: [],
      pageNum: 1,
      pageSize: 3,
      total: 0,
      // 查询表单(查询条件)
      dept: {
        id: "",
        name: "",
        remark: "",
      },
    };
  },
  methods: {
    async getDeptList() {
      const { data: res } = await this.$http.post(
        `/dept/page?pageNum=${this.pageNum}&pageSize=${this.pageSize}&deptName=${this.dept.name}`
      );
      if (res.code == 200) {
        this.total = res.data.total;
        this.pageNum = res.data.pageNum;
        this.pageSize = res.data.pageSize;
        this.deptList = res.data.list;
        // console.log(this.deptList);
      } else {
        this.$message.error(res.message);
      }
    },
    btnsearch() {
      this.$http.get("dept/page", {
        params: {
          name: this.dept.name,
          remark: this.dept.remark
        }
      });
      this.getDeptList();
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.getDeptList();
    },
    handleCurrentChange(v) {
      this.pageNum = v;
      this.getDeptList();
    },
    //删除部门
    getDeptIds(){
      return this.multipleSelection.map(item => item.id)
    },
    // async removeDeptById(id) {
    //   const confirmResult = await this.$confirm(
    //     "请问是否要永久删除该用户",
    //     "删除提示",
    //     {
    //       confirmButtonText: "确认删除",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch((err) => err);
    //
    //   if (confirmResult !== "confirm") {
    //     return this.$message.info("已经取消删除");
    //   }
    //
    //   const { data: res } = await this.$http.delete("/dept/delete",{ params: { id } });
    //   console.log(res);
    //
    //   if (res.code !== 200) return this.$message.error("删除部门失败");
    //   this.$message.success("删除部门成功");
    //   this.getDeptList();
    // },
    // editDeptById(row) {
    //   // console.log("aaaaa");
    //   // delete row.faceurl;
    //   this.$router.push({
    //     path: "/deptedit",
    //     query: { 'id': row.id,'name': row.name, 'remark': row.remark},
    //   });
    // },
    editDeptById(id) {
      this.$router.push({path:"/deptedit",query:{'id':id}})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    btndelete(){
      this.$confirm('此操作将永久删除这些部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const list=this.getDeptIds()
        console.log(list)
        this.$http.delete("/dept/delete",{
          data: list,
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(resp =>{
          // console.log(resp)
          if(resp.data.flag){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            // this.queryparams.currentPage=1
            this.getDeptList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
  },
};
</script>

<style scoped>
</style>